<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket-球球大作战</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .map{
            width: 19200px;
            height:10800px;
            background-color: black;
        }
    </style>
</head>
<body>
<!--球球大作战地图-->
<div class="map">
    <input type="text"  id="x"><br>
    <input type="text"  id="y"><br>
    <input type="text"  id="name"><br>
    <button onclick="init()">连接</button>
    <button onclick="sendPosition()">发送当前坐标</button>
    <button onclick="skill('Q')">Q技能</button>
    <button onclick="skill('W')">W技能</button>
</div>
</body>
<!--SockJS库-->
<script src="https://cdn.jsdelivr.net/npm/sockjs-client@1/dist/sockjs.min.js"></script>
<!--Stomp.js 库-->
<script src="https://cdn.jsdelivr.net/npm/stompjs@2.3.3/lib/stomp.min.js"></script>
<script>
    let socket;
    let client;
    //建立通信连接
    function init(){
        socket = new SockJS("http://192.168.231.12/ws")
        //建立stomp客户端实列
        client = Stomp.over(socket);
        //----------------订阅逻辑-----------------
        client.connect({},function (frame) {
            //订阅位置
            client.subscribe("/game/position",function (msg) {
                //接收到消息
                console.log("收到消息",msg);
            })

            //订阅技能
            //订阅
            client.subscribe("/game/skill",function (msg) {
                //接收到消息
                console.log("收到消息",msg);
            })
        })
    }

    //---------------发送逻辑-----------------
    function sendPosition(){
        let x = document.getElementById("x").value;
        let y = document.getElementById("y").value;
        let name = document.getElementById("name").value;
        let json = {
            x:x,
            y:y,
            name:name
        }
        //发送
        client.send("/qiuqiu/position",{},JSON.stringify({json}));
    }

    function skill(i){
        let name = document.getElementById("name").value;
        let json = {
            "name":name,
            "skill":i
        }
        //发送
        client.send("/qiuqiu/skill",{},JSON.stringify({json}));
    }

</script>
</html>